<template>
  <div
    v-bind:style="{
      backgroundImage: 'url(' + bg + ')',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% 100%',
      width: '100%',
      height: '100%',
    }"
  >
    <transition name="fade-quick">
      <Header
        class="i-layout-header"
        style="height: 70px"
      >
        <Row style="height: 60px">
          <i-col span="12" style="height: 60px">
            <Row>
              <Col>
                <img
                  src="../../assets/sany-image/logo.png"
                  style="margin: 10px;height:50px"
                />
              </Col>
              <Col>
                <div class="layout-breadcrumb" style="font-size: 20px;font-weight: bold">天顺风能LTC端到端平台
</div>
              </Col>
            </Row>
          </i-col>
          <i-col span="10">
            <div>
              <span id="userName">
                <Dropdown>
                  <a href="javascript:void(0)">
                    <img
                      src="../../assets/sany-image/菜单.png"
                      class="userImg"
                    />
                    <Icon type="arrow-down-b"></Icon>
                  </a>
                  <Dropdown-menu slot="list">
                    <Dropdown-item>
                      <a href="/Thingworx/logout/logout.jsp"> 退出登陆</a></Dropdown-item
                    >
                  </Dropdown-menu>
                </Dropdown>
              </span>
            </div>
          </i-col>
          <i-col span="2">
            <span class="usertxt"> {{ userName }} </span>
          </i-col>
        </Row>
      </Header>
    </transition>
    <Row id="row1">

    </Row>
    <Row id="row2"  style="margin-top:100px">
      <Col span="3" push="4" style="  width: 200px; height: 200px;">
        <a href="/TitanWind/#/overview_amap"
          ><img src="../../assets/sany-image/商机地图.png" class="appimg1" />
        </a>
      </Col>
      <Col span="3" push="4" style="  width: 200px; height: 200px;">
        <a href=""
          ><img src="../../assets/sany-image/数据分析.png" class="appimg1" />
        </a>
      </Col>
      <Col span="3" push="4">
        <a href=""
          ><img src="../../assets/sany-image/商机执行.png" class="appimg1"/>
        </a>
      </Col>

      <Col span="3" push="4">
        <a href=""
          ><img src="../../assets/sany-image/项目管理.png" class="appimg1" />
        </a>
      </Col>
      <Col span="3" push="4">
        <a href="/TitanWind/#/cloudView"
          ><img src="../../assets/sany-image/精准报价.png" class="appimg1" />
        </a>
      </Col>
      <Col span="3" push="4">
        <a href=""
          ><img src="../../assets/sany-image/产销平衡.png" class="appimg1"/>
        </a>
      </Col>
      <Col span="3" push="4">
        <a href=""
          ><img src="../../assets/sany-image/快速收款.png" class="appimg1"/>
        </a>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "index.vue",
  data() {
    return {
      userName: "",
      bg: require("@/assets/sany-image/background.png"),
    };
  },
  mounted() {
    this.getUserName();
  },
  methods:{
    getUserName(){
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$axios.request({
          method: 'post',
          url: '/Thingworx/Things/UtilThing/Services/getCurrentUser',
          data: {tableData: {data: _this.tableData}}
        }).then(res => {
          //判断用户是否登陆
          if(res.data.name){
            _this.userName = res.data.name;
          }else{
            //跳转登陆页
            window.location.href="/Thingworx/FormLogin/SanyUser";
          }
          console.log('success');
        }).catch(res => {
          console.log(res);
        })
      })
    }
  }
};
</script>

<style scoped>
.appimg1 {
  margin: 10px;
  width: 200px;
  height: 200px;
  margin-left:-200px
}

.moster {
  margin-right: 100px;
  width: 10px;
  height: 10px;
}
.col {
  width: 160px;
}
#row2 {
  margin-top: 50px;
}
#row1 {
  margin-top: 30px;
}
#userName {
  float: right;
  margin-right: 50px;
}
.userImg {
  margin-top: 20px;
  width: 20px;
  height: 20px;
}
.usertxt {
  margin-left: -42px;
}
</style>
